<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>阿里美图PC网页练习</title>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
		<!-- 引入自定义样式 -->
		<link rel="stylesheet" href="./css/test.css">
	</head>
	<body>
		<div class="container">
			<div class="row">
				<header class="col-md-2">
					<div class="logo">
						<a href="#">
							<img class="hidden-xs" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1084046859,1200165626&fm=26&gp=0.jpg" alt="">
							<span class="visible-xs">山里云</span>
						</a>
					</div>
					<div class="nav">
						<ul>
							<li><a href="#" class="glyphicon glyphicon-home">生活馆</a></li>
							<li><a href="#" class="glyphicon glyphicon-leaf">科技园</a></li>
							<li><a href="#" class="glyphicon glyphicon-sunglasses">影视院</a></li>
							<li><a href="#" class="glyphicon glyphicon-paperclip">信息秀</a></li>
						</ul>
					</div>
				</header>
				<article class="col-md-7">
					<!-- 新闻 -->
					<div class="news clearfix">
						<div class="row">
							<ul>
								<li>
									<a href="#">
										<img src="http://img.alicdn.com/i4/1725562121/O1CN01kBVG8F1RXSb1EeCw4_!!1725562121.jpg_600x600q90.jpg" alt="">
										<p>恐龙玩偶可爱生日礼物毛绒玩具床上睡觉被子两用软抱枕小公仔娃娃</p>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="http://img.alicdn.com/i1/3348640195/O1CN01pZHUqU1DJLrZG4Dl0_!!0-item_pic.jpg_600x600q90.jpg" alt="">
										<p>几何形状一年级小学立体图形教具圆柱体长方体正方体积木不同形状</p>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="http://img.alicdn.com/bao/uploaded/i3/4232669292/O1CN01LbAlbt2IVmr2BdTcl_!!4232669292-0-lubanu-s.jpg_600x600q90.jpg" alt="">
										<p>滑稽脸抱枕表情包抱枕表情毛绒玩具公仔枕头笑脸靠垫暖手睡觉可爱</p>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="http://img.alicdn.com/i2/2101233743/O1CN015mDfnF1dWL4ARROyH_!!2101233743.jpg_600x600q90.jpg" alt="">
										<p>皮卡丘公仔毛绒玩具超大号男生款抱枕布娃娃玩偶超萌生日礼物女生</p>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="http://img.alicdn.com/i4/2207662696376/O1CN01QBd9Pp1wyFvAMspCG_!!2207662696376.jpg_600x600q90.jpg" alt="">
										<p>晨光荧光笔标记笔淡色系米菲香味斜头学生用单头记号笔彩色粗划重点小神器大容量做笔记的强迫症笔文具套装</p>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<!-- 发表 -->
					<div class="publish">
						<div class="row">
							<div class="col-sm-9">
								<h3 class="text-info ">元旦火车票开抢 这些航班价格比高铁便宜近半</h3>
								<p class="text-muted">2020年12月03日 00:01 中新经纬</p>
								<p class="text-muted hidden-xs">2021年元旦假期为1月1日至3日，按照火车票互联网和电话订票提前30天发售的规定，今日（3日）起，旅客可通过12306网站和“铁路12306”APP购买2021年元旦火车票。</p>
								<p class="text-primary">25条评论|182人参与</p>
							</div>
							<div class="col-sm-3 pic hidden-xs">
								<img src="https://n.sinaimg.cn/default/crawl/90/w540h350/20201203/016f-ketnnaq5317741.jpg" alt="">
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9">
								<h3 class="text-info">被观看的未成年网红：“小网红”是不是个好词</h3>
								<p class="text-muted">2020年12月03日 07:55 中国青年报</p>
								<p class="text-muted hidden-xs">一个粉丝超千万的“萌娃”博主，睁着大大的眼睛对正在拍视频的妈妈说：“在这个家里，我姓刘，爸爸也姓刘，只有你姓李，谁才是垃圾桶里捡来的，你心里没点数吗？”</p>
								<p class="text-primary">71条评论|1,270人参与</p>
							</div>
							<div class="col-sm-3 pic hidden-xs">
								<img src="https://n.sinaimg.cn/news/transform/100/w543h357/20201203/1852-ketnnaq5198353.png" alt="">
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9">
								<h3 class="text-info">悬索桥也能跑高铁？这座中国大桥填补世界空白！</h3>
								<p class="text-muted">2020年12月03日 08:00 国资委网站</p>
								<p class="text-muted hidden-xs">11月30日，由中铁大桥院集团设计、中铁大桥局集团承建的世界首座高速铁路悬索桥、中国首座公铁两用悬索桥——五峰山长江大桥顺利结束连（云港）镇（江）高铁联调联试任务，开始进入年底前的通车准备。</p>
								<p class="text-primary">370条评论|7,321人参与</p>
							</div>
							<div class="col-sm-3 pic hidden-xs">
								<img src="https://n.sinaimg.cn/news/crawl/155/w550h405/20201203/865c-ketnnaq5231093.jpg" alt="">
							</div>
						</div>
					</div>
				</article>
				<aside class="col-md-3">
					<div class="row">
						<a href="#" class="banner">
							<img src="https://ubmcmm.baidustatic.com/media/v1/0f000nSUb49mPfRbAqvWD6.jpg" alt="">
						</a>
						<a href="#" class="add">
							<span class="btn btn-primary">热搜</span>
							<h3 class="text-primary">成都王者荣耀工作室</h3>
							<p class="text-muted">欢迎有兴趣的朋友加入我们，我们竭诚为你解答，期待你的加入...</p>
						</a>
					</div>
				</aside>
			</div>
		</div>
	</body>
</html>
